<template>
  <div class="layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <MyTab
        :activeName="tabs.activeName"
        :tabList="tabs.tabList"
        :tabBtn="tabs.tabBtn"
        @changeTabs="changeTabs"
        @listenClick="listenClick"
      >
        <template v-slot:logo>
          <LogoSet></LogoSet>
        </template>
        <template v-slot:msg>
          <MsgSet></MsgSet>
        </template>
      </MyTab>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import { reactive, defineAsyncComponent } from 'vue'

const MyTab = defineAsyncComponent(() => import('/@/components/tab/index.vue'))
const LogoSet = defineAsyncComponent(
  () => import('/@/views/setting/components/LogoSet.vue')
)
const MsgSet = defineAsyncComponent(
  () => import('/@/views/setting/components/MsgSet.vue')
)

let tabs = reactive({
  activeName: 'logo',
  tabList: [
    { label: '企业信息设置', name: 'logo' },
    { label: '消息提醒设置', name: 'msg' }
  ],
  tabBtn: []
})

const changeTabs = (tab) => {
  tabs.activeName = tab
}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = {}
// 监听子级表格  传过来的方法
const listenClick = (name: string, val: any) => {
  objFun[name](val)
}
</script>
